<template>
  <div class='menu-bar-container'>
    <ul class='menu-bar'>
      <MenuBarItem v-for="(item, index) in menuBarItems" :menuBarItem="item" :index="index" :isActive="activeItemIndex === index"
        :shouldHoverToggleActive="activeItemIndex > -1" />
    </ul>
    <div class='btn btn-xs btn-info'>
      登录
    </div>
  </div>
</template>
<script>
  import MenuItems from './items-config.js'
  import MenuBarItem from './menu-bar-item.vue'

  export default {
    componentName: 'MenuBar',

    components: {
      MenuBarItem
    },
    data: function () {
      return {
        menuBarItems: MenuItems,
        activeItemIndex: -1
      }
    },
    methods: {
      handleItemClick: function ({ itemIndex, isTogglingEnabled }) {
        if (isTogglingEnabled && this.activeItemIndex === itemIndex) {
          this.activeItemIndex = -1
        } else {
          this.activeItemIndex = itemIndex
        }
      }
    },
    mounted() {
      this.$on('itemClick', this.handleItemClick);
    }
  }

</script>
